<template>
	<view class="content">
    <view class="search">
      <input @confirm="confirm" confirm-type="search" placeholder="请输入搜索关键词" type="text" v-model="value">
      <button @click="add"><u-icon name="plus"></u-icon></button>
    </view>
    <view class="section">
      <view class="item" @click="goDetail(val.id)" v-for="(val,index) in formData" :key="index">
        <view class="item_left">
          <img :src="val.topic" alt="">
        </view>
        <view class="item_right">
          <view class="title">{{val.title}}</view>
          <p style="font-size:12px;">{{val.summary}}</p>
          <p style="display:flex;justify-content: space-between;">
            <span>{{val.author}}</span>
            <span>{{val.createTime}}</span>
          </p>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
        value:'',
        formData:[]
			}
		},
		methods: {
      // 搜索
      confirm(event){
        console.log(event);
        let token = this.$store.state.token
        console.log(token);
        let searchUrl = "http://39.106.224.223:8088/cms/ordinary/essay/query/args"
        if (event.detail.value) {
          searchUrl = "http://39.106.224.223:8088/cms/ordinary/essay/query/args?title="+event.detail.value
        }
        uni.request({
          url: searchUrl,
          header:{
            'content-type':'application/json',
            'Authorization':token
          },
          method:'GET',
          success:res=>{
            console.log(res)
            if (res.data.code == 200) {
              this.formData = res.data.data
            }
          }
        })
      },
      goDetail(id){
        uni.navigateTo({
           url: '../article/articleDetail?id='+id
        });
      },
      add(){
        uni.reLaunch({
          url: '../article/addArticle'
        });
      },
      // 默认查询数据
      initFn(){
        let token = this.$store.state.token
        console.log(token);
        uni.request({
          url: 'http://39.106.224.223:8088/cms/ordinary/essay/query',
          header:{
            'content-type':'application/json',
            'Authorization':token
          },
          method:'GET',
          success:res=>{
            if (res.data.code == 200) {
              res.data.data.forEach(val=>{
                if (val.topic.indexOf('.png')==-1&& val.topic.indexOf('.jpeg')==-1) {
                  val.topic = "../../static/cat.jpeg"
                }
              })
              this.formData = res.data.data
            }
          }
        })
      }
    },
    onShow() {
      if (!this.$store.state.token) {
        this.$refs.uToast.show({
          title: "请先登录",
          type: "warning",
          url: "pages/login/index"
        });
        return
      }
      this.initFn()
    },
	}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search{
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    input{
      flex: 1;
      border: 1px solid #cccccc;
      padding: 10rpx;
      border-radius: 6rpx;
    }
    button{
      width: 70rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 15rpx;
      background: #11998e;
      color: #fff;
    }
  }
  .section{
    flex: 1;
    overflow-y: auto;
    border-bottom: 1px solid #f3f3f3;
    .item{
      width: 100%;
      height: 300rpx;
      padding: 10rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;
      .item_left{
        width: 240rpx;
        height: 300rpx;
        padding: 40rpx 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .item_right{
        flex: 1;
        height: 300rpx;
        padding: 36rpx 10rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        
        .title{
          width: 100%;
          font-size: 14px;
          font-weight: 700;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp:1;//属性值为几  代表的就是显示几行
          -webkit-box-orient:vertical;
        }
        p:nth-child(2){
          height: 200rpx;
          padding: 10rpx 0;
        }
        p{
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp:5;//属性值为几  代表的就是显示几行
          -webkit-box-orient:vertical;

        }
      }
    }
  }
}

</style>
